<template>
  <div id="login" class="login_container">
    <div class="login_box">
      <!--头像区域-->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!--登陆表单区-->
      <!--loginForm 数据对象-->
      <el-form label-width="0px" ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
        <!--username-->
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <!--password-->
        <el-form-item prop="password">
          <el-input  prefix-icon="iconfont icon-password" type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <!--button-->
        <el-form-item class="btns">
          <el-button type="primary" @click="loginSubmit">登录</el-button>
          <el-button type="info" @click="loginFormReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
      name: 'login',
      data() {
          return {
              loginForm:{
                  username:"admin",
                  password:"123456"
              },
              loginFormRules: {
                  // blur 失去焦点
                  username: [
                      { required: true, message: '请输入用户名', trigger: 'blur' },
                      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
                  password: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
              }
          }
      },
      methods: {
          loginFormReset() {
              // this 指向你
              this.$refs.loginFormRef.resetFields();
          },
          // await 只能修饰 通过async 修饰的方法中
          loginSubmit() {
              this.$refs.loginFormRef.validate(async (valid, fields) => {
                  if (valid) {
                      // const result = this.$http.post("login", this.loginForm)
                      // 这个result 是一个promise对象 可以通过 await简化
                      // const result = await this.$http.post("login", this.loginForm)
                      // 这个result 是一个才是直接返回的报文对象 {header:{}, data:{}}
                      // 为了方便取数据可以通过解构方式来映射， 这里直接报文中的data取出；并重命名为res
                      const {data: res} = await this.$http.post("login", this.loginForm)
                      console.log(res)
                      if (res.meta.status !== 200) {
                          // this.$message({
                          //     message: '恭喜你，这是一条成功消息',
                          //     type: 'error'
                          // });
                          // 技巧： 失败直接return return后面语句 依然会执行
                          // 等同于
                         /* this.$message.error('登陆失败')
                          return */
                          return this.$message.error('登陆失败')
                      } else {
                          window.sessionStorage.setItem('token', res.data.token)
                          // 编程式路由跳转
                          this.$router.push('/home')
                          this.$message.success('登陆成功')
                          // 1.成功登陆后的token,保存到客户端的 sessionStorage;为什么不用localStorage 是因为localStorage 是持久化的机制
                          // 而sessionStorage是基于回话的机制
                          // 1.1项目中出了登录之外的其他AP接口,必须在登录之后才能访问
                          // 2 token只应在当前网站打开期间生效,所以将 token保存在 sessionStorage中
                          // 2.通过编程式导航跳转到后台主页,路由地址是/home
                      }
                  } else {
                      return this.$message.error("数据校验失败")
                  }

              })
          }
      }

  }
</script>

<style  scoped>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
  }
  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    /*距离顶部50%*/
    top: 50%;
    /*距离左侧50%*/
    left: 50%;
    /*在横轴和纵轴个移动-50%*/
    transform: translate(-50%, -50%);
  }
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px;
    /*地位一定要position 设置为absolute*/
    position: absolute;
    left: 50%;
    /*avatar_box 自身宽高的50%*/
    transform: translate(-50%, -50%);
    background-color: #fff;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color:  #eee;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
  }
  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    /*默认为content-box*/
    box-sizing: border-box;
  }

</style>
